<template>
	<view class="sale-labels">
		<view class="label-wrap" v-if="sale_tips">
			<view
				class="label"
				:style="{ color: item.color, borderColor: item.color }"
				v-for="(item, index) in sale_labels"
				:key="index"
			>
				{{ item.title }}
			</view>
		</view>
		<OrderNotice
			:display_name="display_name"
			:use_rule="use_rule"
			:sale_tips="sale_tips"
			:booking_tips="booking_tips"
		/>
	</view>
</template>

<script setup lang="ts">
import { computed } from "vue"
import type { SaleTips, UserRule } from "@/types/ticket"
import OrderNotice from "./order-notice.vue"

interface SaleLabelsProps {
	display_name: string
	use_rule: UserRule
	sale_tips: SaleTips[]
	booking_tips: Array<{ title: string; content: string }>
}

const props = defineProps<SaleLabelsProps>()

const sale_labels = computed(() => props.sale_tips?.filter?.((item) => item.display_label))
</script>

<style lang="scss" scoped>
.sale-labels {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.label-wrap {
		display: flex;
		align-items: center;
	}

	.label {
		display: inline-flex;
		align-items: center;
		padding: 4rpx 8rpx;
		margin-right: 8rpx;
		border-radius: 8rpx;
		border: 1rpx solid #e9eaee;
		font-size: 20rpx;
		color: #86909c;
		line-height: 28rpx;

		&:last-child {
			margin-right: 0;
		}
	}
}
</style>
